<!--
 * @Descripttion: 文件说明
 * @version: 0.0.1
 * @Author: sunchangshun
 * @Date: 2021-02-18 07:58:07
 * @LastEditors: gaojiapeng
 * @LastEditTime: 2021-04-13 16:50:24
-->
<template>
  <div class="chart" ref="chart">
    <div id="chartDY" style="height: 100%;width: 100%"></div>
  </div>
</template>
<script>
import DataSet from "@antv/data-set";
import * as echarts from "echarts";
export default {
  data() {
    return {
      charmaxval : 10,
      MyChart: null
    };
  },
  mounted() {
    this.getChart()
  },
  methods: {
    getChart() {
      var chartDom = document.getElementById('chartDY');
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "",
          textStyle: {
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["电压1", "电压2", "电压3", "电压4", "电压5"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          top: "middle",
          left: "3%",
          right: "4%",
          bottom: "3%",
          height: "80%",
          containLabel: true,
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "8：00",
              "9：00",
              "10：00",
              "11：00",
              "12：00",
              "13：00",
              "14：00",
              "15：00",
              "16：00",
              "17：00",
            ],
            axisTick: {
              show: true, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ebf8ac", //X轴文字颜色
              },
            },
          },
        ],
        yAxis: [
          {
            min:330,  //取0为最小刻度
            max: 400, //取100为最大刻度
            type: "value",
            nameTextStyle: {
              color: "#ebf8ac",
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ebf8ac",
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#DDD",
              },
            },
          },
        ],
        series: [
          {
            name: "电压1",
            type: "line",
            min: 10,
            max: 40,
            data: [380, 380, 380, 385, 380, 380, 380, 380, 380, 377],
            lineStyle: {
              normal: {
                width: 5,
                color: {
                  type: "linear",
                  colorStops: [
                    {
                      offset: 0,
                      color: "#AAF487", // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#47D8BE", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#47D8BE", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(71,216,190, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            itemStyle: {
              normal: {
                color: "#AAF487",
                borderWidth: 10,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                           shadowBlur: 100,*/
                borderColor: "#AAF487",
              },
            },
            smooth: true,
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "电压2",
            type: "line",
            min: 10,
            max: 40,
            data: [380, 380, 372, 380, 380, 380, 380, 395, 380, 377],
            lineStyle: {
              normal: {
                width: 5,
                color: {
                  type: "linear",

                  colorStops: [
                    {
                      offset: 0,
                      color: "#AAF487", // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#47D8BE", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#47D8BE", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(249,165,137, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            itemStyle: {
              normal: {
                color: "#F6D06F",
                borderWidth: 10,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                           shadowBlur: 100,*/
                borderColor: "#F6D06F",
              },
            },
            smooth: true,
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "电压3",
            type: "line",
            min: 10,
            max: 40,
            data: [378, 380, 380, 380, 380, 380, 350, 380, 380, 380],
            lineStyle: {
              normal: {
                width: 5,
                color: {
                  type: "linear",

                  colorStops: [
                    {
                      offset: 0,
                      color: "#AAF487", // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#47D8BE", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#47D8BE", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(249,165,137, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            itemStyle: {
              normal: {
                color: "#F6D06F",
                borderWidth: 10,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                           shadowBlur: 100,*/
                borderColor: "#F6D06F",
              },
            },
            smooth: true,
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "电压4",
            type: "line",
            min: 10,
            max: 40,
            data: [380, 380, 380, 380, 380, 380, 380, 380, 380, 380],
            lineStyle: {
              normal: {
                width: 5,
                color: {
                  type: "linear",

                  colorStops: [
                    {
                      offset: 0,
                      color: "#AAF487", // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#47D8BE", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#47D8BE", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(249,165,137, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            itemStyle: {
              normal: {
                color: "#F6D06F",
                borderWidth: 10,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                           shadowBlur: 100,*/
                borderColor: "#F6D06F",
              },
            },
            smooth: true,
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "电压5",
            type: "line",
            min: 10,
            max: 40,
            data: [380, 380, 380, 380, 380, 380, 380, 380, 380, 380],
            lineStyle: {
              normal: {
                width: 5,
                color: {
                  type: "linear",

                  colorStops: [
                    {
                      offset: 0,
                      color: "#AAF487", // 0% 处的颜色
                    },
                    {
                      offset: 0.4,
                      color: "#47D8BE", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#47D8BE", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(249,165,137, 0.5)",
                shadowBlur: 10,
                shadowOffsetY: 7,
              },
            },
            itemStyle: {
              normal: {
                color: "#F6D06F",
                borderWidth: 10,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
                           shadowBlur: 100,*/
                borderColor: "#F6D06F",
              },
            },
            smooth: true,
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          }
        ],
      };
      myChart.setOption(option);
    }
  },
};
</script>
<style lang="scss" scoped>
.chart {
  height: 100%;
  width: 100%;
  padding: 10px;
}
</style>
